<template>
    <div>
      <el-card class="box-card">
        <mytitle :showLine="false">{{$route.meta.title}}</mytitle>
        <el-button type="success"  style="margin: 20px;" @click="addRow">新增投入品</el-button>
        <el-table ref="singleTable" v-loading="loading" :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" :data="tableData" highlight-current-row @current-change="handleCurrentChange" border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="variableInputName" label="投入品名称"  align="center">
          </el-table-column>
          <el-table-column prop="category" label="类别"  align="center">
          </el-table-column>
          <el-table-column prop="totalQuantity" label="总数量(kg)"  align="center">
          </el-table-column>
          <el-table-column  label="添加时间"  align="center">
            <template slot-scope="scope">
               <span>{{scope.row.createTime | formatDate}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="residue" label="剩余数量(kg)"  align="center">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="checkRow(scope.row)" type="text" >使用记录</el-button>
              <el-button @click="editRow(scope.row)" type="text" >编辑</el-button>
              <el-button @click="dispatchEvent=!dispatchEvent;showItem=scope.row" type="text" >库存调整</el-button>
            </template>
          </el-table-column>
        </el-table>
         <div class="pagination-box">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page.sync="info.page"
            :page-size="info.size"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
         </div>
      </el-card>
      <el-dialog
        :visible.sync="dispatchEvent"
        width="30%"
        >
        <div slot="title"><mytitle>库存调整</mytitle></div>
        <div class="inputs-name">投入品名称:{{ showItem.variableInputName }}</div>
        <div class="for-item">
          <span>调整类型：</span>         
          <el-select v-model="addInfo.type" placeholder="请选择">
            <el-option label="增加库存" value="0"></el-option>
            <el-option label="减少库存" value="1"></el-option>
          </el-select>
        </div>
        <div class="for-item">
          <span>数量：</span>
          <el-input v-model="addInfo.variableInputNum" type="number" class="inputs" placeholder="请输入数量">
                  <template slot="append">kg</template>
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dispatchEvent = false" type="success"  plain>取 消</el-button>
          <el-button type="success"  @click="sureAddjust">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  <script>
  import {allVariableInputDetail,inventoryAdjust} from '../util/api.js'
  export default {
    data() {
      return {
        info:{
          page:1,
          size:6
        },
        loading:false,
        input:"",
        dispatchEvent:false,
        tableData: [],
        showItem:{},
        addInfo:{
            id: '',
            type:'',
            variableInputNum:0
        },
        currentRow: null,
        total:0
      }
    },
    mounted(){
          this.allVariableInputDetail()
    },
    methods: {
      async allVariableInputDetail(){
        this.loading=true
         let res= await allVariableInputDetail(this.info)
        //  console.log(res)
         if(res.code!=200)return
         this.tableData = res.data.rows
         this.total = res.data.total
         this.loading=false
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      pageChange(val) {
          this.info.page = val;
          this.allVariableInputDetail()
          // console.log(`当前页: ${val}`);
      },
     async sureAddjust(){
      if(!this.addInfo.type||!this.addInfo.variableInputNum)return this.$message.info("请填写完整");
         this.addInfo.id= this.showItem.id
         let res = await inventoryAdjust(this.addInfo);
        //  console.log(res)
         if(res.code!=200)return;
         this.$message.success("修改成功");
         this.allVariableInputDetail()
         this.dispatchEvent=false;
         
         
      },
      //编辑
      editRow(row){
          this.$router.push({
            path:'/variableInputManagement/compile',
            query:{
                variableInputId:row.id,
                variableInputPicUrl:row.picUrl,
                variableInputType:row.category,
                variableInputName:row.variableInputName,
                variableInputNum:row.totalQuantity
            }
          })
      },
      // 新增
      addRow(){
          this.$router.push({
            path:'/variableInputManagement/add',
          })
      },
      checkRow(row) {
        this.$router.push({
          path: '/variableInputManagement/examine',
          query:{
            variableInputName:row.variableInputName
          }
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .box-card {
    width: 100%;
    margin: 14px 0;
    .pagination-box{
      width: 100%;
      padding: 20px;
      .el-pagination{
        text-align: right;
      }
    }
  }
  .for-item{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    span{
      width: 100px;
    }
    .inputs{
         width: 220px;
    }
  }
  </style>